<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <span>重命名文件夹</span>
      </div>
      <el-table :data="state" style="width: 100%">
        <el-table-column prop="created_at" label="创建时间"></el-table-column>
        <el-table-column prop="folder_name" label="文件夹名称">
          <template #default="{ row }">
            <el-input v-model="row.folder_name" />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button
              @click="renameFolder(row.id, row.folder_name)"
              type="primary"
              size="small"
              >重命名</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getFolderApi, renameFolderApi } from "@/utils/api";
import { ElMessage, ElMessageBox } from "element-plus";

const state = ref([]);
const loading = ref(false);

const getFolder = async () => {
  try {
    loading.value = true;
    const id = localStorage.getItem("id");
    const res = await getFolderApi({ id });
    if (res.code === 200) {
      res.data.data.forEach((item) => {
        item.created_at = item.created_at.split("T")[0];
      });
      state.value = res.data.data;
    }
  } finally {
    loading.value = false;
  }
};

onMounted(getFolder);

const renameFolder = async (id, folder_name) => {
  try {
    const res = await renameFolderApi({ id, folder_name });
    if (res.code === 200) {
      await getFolder();
      showSuccessMessage();
    }
  } catch (error) {
    console.error(error);
  }
};

const showSuccessMessage = () => {
  ElMessage.success("文件夹重命名成功");
  // 或者使用 ElMessageBox 提示框
  // ElMessageBox.alert('文件夹重命名成功', '成功', {
  //   confirmButtonText: '确定',
  //   type: 'success',
  // });
};
</script>

<style lang="css" scoped>
ul {
  list-style: none;
}

li {
  margin: 10px 0;
}

input {
  margin-left: 10px;
}

button {
  margin-left: 10px;
}
</style>
